<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>申请退款</title>
		<meta name="keywords" content="知果汇" />
		<meta name="description" content="知果汇" />
		<link rel="SHORTCUT ICON" href="_IMG_/favicon.ico" />
		<link rel="stylesheet" href="_CSS_/form.css" />
		<style type="text/css">
			.people,.phone{width: 169px;}
		</style>
	</head>
	<body>
		<form id="form1" action="" method="post" class='forms'>
			<div class='form-group'>
				<label>订单编号：</label>
				<span class="number"></span>
			</div>
			<div class='form-group'>
				<label class="top">退款原因：</label>
				<div class="model-select-box">
				  	<div class="model-select-text" data-value=""></div>
				  	<ul class="model-select-option">
				    	<li data-option="1">现在不想购买</li>
				    	<li data-option="2" class="seleced">信息填写错误重新拍</li>
				    	<li data-option="3">重复下单</li>
				    	<li data-option="4">商品价格较贵</li>
				    	<li data-option="5">拍错了</li>
				    	<li data-option="6">其他原因</li>
				  	</ul>
				</div>
			</div>
			<div class='form-group'>
				<label>联系人：</label>
				<input class='form-control people' type='text'/>
			</div>
			<div class='form-group'>
				<label>手机号码：</label>
				<input class='form-control phone' type='tel'/>
			</div>
		</form>
	</body>
	<script src="_JS_/jquery-1.8.3.min.js"></script>
	<script src="_JS_/jquery.base64.js"></script>
	<script src="_JS_/jquery.cookie.js"></script>
	<script src="_JS_/common.js"></script>
	<script type="text/javascript">
		$(function(){
			var url = window.location.href;
			var id = url.split("#")[1];
			$.ajax({
				type: "get",
				url: "/index.php/api/form/order_details",
				data: {
					'id': id,
					'type': 2
				},
				dataType: 'jsonp',
				success: function (msg) {
					if (msg.code == 200) {
						$('.number').html(msg.data.order);
					}
				}
			});
		    /*模拟网页中所有的下拉列表select*/
		    function selectModel(){
		        var $box = $('div.model-select-box');
		        var $option = $('ul.model-select-option', $box);
		        var $txt = $('div.model-select-text', $box);
		        var speed = 10;
		        /*
		         * 单击某个下拉列表时，显示当前下拉列表的下拉列表框
		         * 并隐藏页面中其他下拉列表
		         */
		        $txt.click(function(e) {
		                $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function(){
		                    int($(this));
		                });
		                $(this).siblings('ul.model-select-option').slideToggle(speed, function(){
		                    int($(this));
		                });
		                return false;
		            });
		        //点击选择，关闭其他下拉
		        /*
		         * 为每个下拉列表框中的选项设置默认选中标识 data-selected
		         * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
		         * 为选项添加 mouseover 事件
		         */
		        $option.find('li').each(function(index, element) {
		                if($(this).hasClass('seleced')){
		                    $(this).addClass('data-selected');
		                }
		            })
		            .mousedown(function(){
		                $(this).parent().siblings('div.model-select-text').text($(this).text())
		                    .attr('data-value', $(this).attr('data-option'));
		                
		                $option.slideUp(speed, function(){
		                    int($(this));
		                });
		                $(this).addClass('seleced data-selected').siblings('li').removeClass('seleced data-selected');
		                return false;
		            })
		            .mouseover(function(){
		                $(this).addClass('seleced').siblings('li').removeClass('seleced');
		            });
		        //点击文档，隐藏所有下拉
		        $(document).click(function(e) {
		            $option.slideUp(speed, function(){
		                int($(this));
		            });
		        });
		        //初始化默认选择
		        function int(obj){
		            obj.find('li.data-selected').addClass('seleced').siblings('li').removeClass('seleced');
		        }
		    }
		
		    selectModel();
		});
	</script>
</html>
